Set Up

Materials

All prerequisites, links to material and slides for this course can be found on github.

RU_shiny

Or can be downloaded as a zip archive from here.

Download zip

Course materials

Once the zip file in unarchived. All presentations as HTML slides and pages, their R code and HTML practical sheets will be available in the directories underneath.

r_course/presentations/slides/ Presentations as an HTML slide show.
r_course/presentations/singlepage/ Presentations as an HTML single page.
r_course/presentations/r_code/ R code in presentations.
r_course/exercises/ Practicals as HTML pages.
r_course/answers/ Practicals with answers as HTML pages and R code solutions.

Set the Working directory

Before running any of the code in the practicals or slides we need to set the working directory to the folder we unarchived.

You may navigate to the unarchived RU_Course_help folder in the Rstudio menu.

Session -> Set Working Directory -> Choose Directory

or in the console.

setwd("/PathToMyDownload/RU_shiny-master/r_course")
# e.g. setwd("~/Downloads/RU_shiny-master/r_course")

Course outline

Session 1 -
- Shiny basics
- app layouts
- app theming
Session 2 -
- Input types
- basic reactivity
- interactive plots
- downloading files from apps
Session 3 -
- uploading files and conditional UIs
- observers
- publishing apps
- basic debugging

What is Shiny? Why do we use it?

Shiny allows us to make powerful web applications with only R code, without the need to learn HTML, JavaScript, or CSS. Deeper knowledge of these other languages can certianly be used with Shiny to improve your apps, but its not necessary.

This allows us to use the analytical tools that are the strengths or R, like statistics and visualization, when making these apps and dashboards.

There are many use cases that depend on the developer’s needs, but Shiny apps can be really useful in transforming common code workflows into user friendly dashboards or displaying and interacting with databases.

While Shiny was developed in R, and this is what we will cover in this course, there is now support for Shiny in Python (since 2023). While Shiny for Python is not as far along as for R (fewer community driven tools available), this will likely change in the future.

Basic components of Shiny app

A shiny app consists of the user interface (UI) and the server function - the UI object defines what will be seen on the page - the server function contains code that combines R code with inputs (eg info from user, databases, or files) and provides instructions for generating outputs - the Shiny R package builds the shiny app from the the UI object and server function

Neth, H. (2025) Introduction to Data Science (https://bookdown.org/hneth/i2ds/)

Shiny - how to get started

A Shiny app is generally contained within one R script to define the UI object and the server function.

library(shiny)
library(bslib)

ui = page_fluid(
  textOutput(outputId = "app_info")
)

server = function(input, output) {
  output$app_info = renderText("Our first app!")
}

shinyApp(ui = ui, server = server)

Shiny - how to get started

When you run the shinyApp function, your RStudio console will be busy and you’ll see a message with a URL. This is the port within your computer that the app is running.

A window should pop up automatically showing the app. You can also copy and paste this address into a browser to open an instance of the app.

To close the app and free up the console, you can: - click on the console to hit the ESC button or Ctrl+C - click on the Stop button on the top right corner of the console

Shiny - how to get started

Shiny is well integrated into R Studio and there are a few additional features that make running apps easier.

If you open a blank R script and add the shiny template code (see previous slide), once you save the file you should see a button in the upper right corner of the script that says Run App.

This will automatically launch the app.

Shiny - how to get started

Pretty much any Shiny app will start with the code below. Just paste this code into a fresh R script to get started.

TIP: Open a new R script, type shinyapp, then hit Shift+Tab, and the template will appear.

Boiler plate Shiny app code:

library(shiny)

ui <- page_fluid()

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Shiny - how to get started

How that app is launched (e.g. in browser or a window within RStudio) can be changed by the dropdown that is part of the Run App button

Shiny - how to get started

You can also start a new app by opening a new file in R Studio and selecting the Shiny Web App option.

The Application name you enter will be the name of a newly created directory that contains the app.R file and your Shiny app.

]

Shiny basics

library(shiny)
library(bslib)

data <- data.frame(col1 = 1:3, 
                   col2 = 4:6)

ui = page_fluid(
  textOutput(outputId = "app_info"),
  
  br(),
  tags$b("Bold text in UI object"),
  
  br(),
  tableOutput(outputId = "table_in")
)

server = function(input, output) {
  output$app_info <- renderText("Rendered in server!")
  
  output$table_in <- renderTable(data)
}

shinyApp(ui = ui, server = server)

]

Let’s look at a very basic app.

]

Shiny basics - packages and global code

library(shiny) #<<
library(bslib) #<<

data <- data.frame(col1 = 1:3, #<<
                   col2 = 4:6) #<<

ui = page_fluid(
  textOutput(outputId = "app_info"),
  
  br(),
  tags$b("Bold text in UI object"),
  
  br(),
  tableOutput(outputId = "table_in")
)

server = function(input, output) {
  output$app_info <- renderText("Rendered in server!")
  
  output$table_in <- renderTable(data)
}

shinyApp(ui = ui, server = server)

]

The top part of a Shiny R script contains any packages that a required, and any global code/variables.

The code that is in this section will only be run once when the app is initialized, and cannot be updated once the app starts.
The variables after this code is run are available in the environment, and can be used in the server function.
If an app is deployed in a server, the global environment is only loaded once and shared between users. Can help if data is large. ]

Shiny basics - UI object

library(shiny) 
library(bslib) 

data <- data.frame(col1 = 1:3, 
                   col2 = 4:6) 

ui = page_fluid( #<<
  textOutput(outputId = "app_info"), #<<
  #<<
  br(), #<<
  tags$b("Bold text in UI object"), #<<
  #<<
  br(), #<<
  tableOutput(outputId = "table_in") #<<
) #<<

server = function(input, output) {
  output$app_info <- renderText("Rendered in server!")
  
  output$table_in <- renderTable(data)
}

shinyApp(ui = ui, server = server)

]

The UI object sets up what the user sees on the page.

Websites use HTML to set up the structure of the page, CSS for styling, and JavaScript for interactivity. The beauty of Shiny is that you can fully use R (or Python) code to utilize HTML, CSS, and JavaScript in the UI, while using R or Python behind the scenes for the server logic.

The UI object is a series of R functions that generates HTML code (see below).

print(as.character(ui))

## [1] "<div class=\"container-fluid\">\n  <div id=\"app_info\" class=\"shiny-text-output\"></div>\n  <br/>\n  <b>Bold text in UI object</b>\n  <br/>\n  <div id=\"table_in\" class=\"shiny-html-output\"></div>\n</div>"

]

Shiny basics - rendering outputs

library(shiny) 
library(bslib) 

data <- data.frame(col1 = 1:3, 
                   col2 = 4:6) 

ui = page_fluid(
  textOutput(outputId = "app_info"), #<<
  
  br(), 
  tags$b("Bold text in UI object"),
  
  br(),
  tableOutput(outputId = "table_in") 
)

server = function(input, output) {
  output$app_info <- renderText("Rendered in server!") #<<
  
  output$table_in <- renderTable(data)
}

shinyApp(ui = ui, server = server)

]

The Output functions from Shiny will hold a space on the page for an HTML element in the UI object.

Using the ‘outputId’ argument, outputs are paired with a render function in the server that will determine the contents of this element based on R code run in the server function.

Here, we simply render some text to fill the output in the UI, but later on we will see how we can fill these UI components in a reactive manner, which is where the power of Shiny is apparent. ]

Shiny basics - HTML helper functions

library(shiny) 
library(bslib) 

data <- data.frame(col1 = 1:3, 
                   col2 = 4:6) 

ui = page_fluid(
  textOutput(outputId = "app_info"), 
  
  br(), #<<
  tags$b("Bold text in UI object"), #<<
   #<<
  br(), #<<
  tableOutput(outputId = "table_in") 
)

server = function(input, output) {
  output$app_info <- renderText("Rendered in server!") 
  
  output$table_in <- renderTable(data)
}

shinyApp(ui = ui, server = server)

]

As we mentioned, the UI object translates R functions into HTML code.

Shiny has many helper functions that allow us to insert common HTML elements, or tags, into our app. A glossary of Shiny tags is here.

Common tags have their own function, such as br() (creates a line break), while others are available using the tags object, like tags$b() in our example (makes text bold).

HTML can be used in Shiny in a variety of potentially complex ways, including as raw HTML. ]

Shiny basics - server function

library(shiny) 
library(bslib) 

data <- data.frame(col1 = 1:3, 
                   col2 = 4:6) 

ui = page_fluid(
  textOutput(outputId = "app_info"), 
  
  br(), 
  tags$b("Bold text in UI object"), 
   
  br(), 
  tableOutput(outputId = "table_in") 
)

server = function(input, output) { #<<
  output$app_info <- renderText("Rendered in server!")#<<
  #<<
  output$table_in <- renderTable(data)#<<
}

shinyApp(ui = ui, server = server)

]

The server function takes the inputs from the UI object, and using R code will generate the output objects that are displayed in the UI.

As the app runs the UI is then monitoring the output object to update the UI components.

Here we simply use text or a table that are hard coded, but the main use of Shiny is the ability to use very complex R code in the server to react to user actions and dynamically create outputs.

We will start getting into reactivity in Session 2. ]

Shiny basics - launch app

library(shiny) 
library(bslib) 

data <- data.frame(col1 = 1:3, 
                   col2 = 4:6) 

ui = page_fluid(
  textOutput(outputId = "app_info"), 
  
  br(), 
  tags$b("Bold text in UI object"), 
   
  br(), 
  tableOutput(outputId = "table_in") 
)

server = function(input, output) { 
  output$app_info <- renderText("Rendered in server!")
  
  output$table_in <- renderTable(data)
}

shinyApp(ui = ui, server = server) #<<

]

The last part of a Shiny app is to run the shinyApp function.

This function does a lot, and it’s not that important to know specifics to use Shiny, but it runs the app in the browser (or in RStudio) while using the UI object and server function to handle the interactions between inputs and outputs. ]

Shiny resources for inputs and outputs

The Shiny cheatsheet is a great resource demonstrating built-in input and output options

Shiny app folder structure

You can run a Shiny app as we have from RStudio as a stand alone file. But once your apps get more complex and you have more support files that the app uses, you’ll contain it in its own directory.

There’s a convention when setting up that folder as follows:

Then once you have this folder, you can use the runApp function from Shiny with the path to the folder (e.g. runApp("/path/to/app")), and it will launch the app with access to all of these support files.

Building our own app from scratch

Adding global variables to app

Let’s start building a real app of our own.

This is the section outside the UI and server where we define global variables or functions. We read in a data frame that contains RNAseq differential expression results.

library(shiny) 
library(bslib) 
library(dplyr)

# read in table
de_table <- read.csv("data/shP53_vs_control_DEG.csv")
de_table$negLog10_pval <- -log10(de_table$pvalue)

# view table (would not be part of shiny script)
head(de_table, 3)

##                ID Symbol baseMean log2FoldChange      lfcSE      stat pvalue
## 1 ENSG00000002745  WNT16 1531.822      -3.766480 0.08955896 -42.05587      0
## 2 ENSG00000026025    VIM 1578.109       5.556894 0.12318261  45.11103      0
## 3 ENSG00000104419  NDRG1 6651.576      -3.614629 0.07273378 -49.69671      0
##   padj negLog10_pval
## 1    0           Inf
## 2    0           Inf
## 3    0           Inf

App with datatable from DT package

We are going to use the DT package to show the table in our app. This provides a very interactive table out of the box with little extra work.

We add the table using the dataTableOutput function in the UI, which is paired with the renderDataTable function in the server.

library(DT) #<<

ui = page_fluid(
  
  textOutput(outputId = "app_info"),
  DT::dataTableOutput(outputId = "de_data") #<<
)

server = function(input, output) {
  
  output$app_info = renderText("This is an app showing differential gene expression data")
  output$de_data = renderDataTable(datatable(de_table)) #<<
}

App with datatable from DT package

shinyApp(ui = ui, server = server)

Customize datatable

The DT package allows for a lot of customization of the html datatable. This link shows some of the capabilities.

Below we will add custom filters on top of each column and round the values to improve the appearance.

server = function(input, output) {
  output$app_info = renderText("This is an app showing differential gene expression data")
  
  output$de_data = renderDataTable({
    datatable(de_table, #<<
              filter = 'top') %>% #<<
      formatRound(columns = c("baseMean", "log2FoldChange", "lfcSE", "stat"), digits = 3) %>% #<<
      formatSignif(columns = c("pvalue", "padj"), digits = 3) #<<
  })
}

Customize datatable

shinyApp(ui = ui, server = server)

Other options for displaying tables

rhandsontable - based on javascript handsontable
- an excel like table that is easily editable by the user
reactable - based on java script React Table
- similar to DT, depends on use case.

Add plots to app

Add an MA plot and a Volcano plot to the page. First add the outputs to the UI object

ui = page_fluid(
  textOutput(outputId = "app_info"),
  
  dataTableOutput(outputId = "de_data"),
  
  plotOutput("ma_plot"), #<<
  
  plotOutput("volcano_plot") #<<
)

Add plots to app

Then make the server function containing the render functions that tell shiny how to make the outputs from the IU object.

library(ggplot2)

server = function(input, output) {
  output$app_info = renderText("This is an app showing differential gene expression data")
  
  output$de_data = renderDataTable({
    datatable(de_table,filter = 'top') %>%
      formatRound(columns = c("baseMean", "log2FoldChange", "lfcSE", "stat"), digits = 3) %>%
      formatSignif(columns = c("pvalue", "padj"), digits = 3)
  })
  
  output$ma_plot = renderPlot({ #<<
    ggplot(de_table, aes(x = baseMean, y = log2FoldChange)) +  geom_point() + #<<
      scale_x_log10() + xlab("baseMean (log scale)") + theme_bw()#<<
  }) #<<
  
  output$volcano_plot = renderPlot({ #<<
    ggplot(de_table, aes(x = log2FoldChange, y = negLog10_pval)) + geom_point() + theme_bw() #<<
  }) #<<
}

Add plots to app

shinyApp(ui = ui, server = server)

App layouts

Tidy up app appearance with cards

bslib has many functions that allow customizing the formatting of the page.

NOTE: Older Shiny versions don’t use bslib and used similar, but slightly different functions to set up page that you’ll likely see on forums (fillPage, fluidPage, etc) - they still work just fine!

Here we add ‘cards’, which are boxes that allow grouping of UI components.

The basic arguments of the card function will be the a call to the card_header function, and the rest of the unnamed arguments being UI elements to go into the card body.

ui <- page_fillable(

  card(card_header("Table of DE results"),
       dataTableOutput(outputId = "de_data")),
  card(card_header("MA plot"),
       plotOutput("ma_plot")),
  card(card_header("Volcano plot"),
       plotOutput("volcano_plot"))
)

Tidy up app appearance with cards

#same server function as previous
shinyApp(ui = ui, server = server)

Collapsable cards with accordions

We can add the ability to hide certain boxes with accordions from the bslib package. By default only the top accordion is open, but the accordian function has an argument ‘open’ that allows you to select which are when the app is started.

ui <- page_fillable(
  accordion(
    accordion_panel(title = "Table of DE results",
                    dataTableOutput(outputId = "de_data")),
    
    accordion_panel(title = "MA plot",
                    plotOutput("ma_plot")),
    
    accordion_panel(title = "Volcano plot",
                    plotOutput("volcano_plot"))
  )
)

Collapsable boxes with accordions

#same server function as previous
shinyApp(ui = ui, server = server)

Multiple rows

The ‘col_widths’ argument of the layout_columns function will control with width of the column. The bootstrap grid system is made up of 12 columns. A numeric vector is provided with widths for each card. Once the elements combined width goes above 12, then the elements are wrapped to the next row.

ui <- page_fillable(
  layout_columns( 
    card(card_header("Table of DE results", dataTableOutput(outputId = "de_data"))),
    
    card(card_header("MA plot",plotOutput("ma_plot"))),
    
    card(card_header("Volcano plot",plotOutput("volcano_plot"))),
    
    col_widths = c(12,6,6)
  ),
)

Multiple rows

#same server function as previous
shinyApp(ui = ui, server = server)

Nested rows within a column

More complicated layouts can be achieved by nesting layout_columns functions. Here we add a tall card as a new row below the table and then nest the plots within this row next to the card.

ui <- page_fillable(
  layout_columns(
    col_widths = 12,
    card(card_header("Table of DE results", dataTableOutput(outputId = "de_data")))),
  
  layout_columns(
    col_widths = c(6, 6),
    card(card_header("This is a tall box")),
    
    layout_columns(
      col_widths = c(12,12),
      card(card_header("MA plot",plotOutput("ma_plot"))),
      
      card(card_header("Volcano plot",plotOutput("volcano_plot")))
    )
  ),
)

Nested rows within a column

#same server function as previous
shinyApp(ui = ui, server = server)

Page layout options

While we have been using the page_fillable function to build the UI, there are three main functions from bslib for slightly differnet page layout strategies:

page_fillable - UI components will be in a grid format that will automatically fill the whole page (both vertically and horizontally).
page_fluid - UI components will be in a grid format that will extend to fill the whole width of the webpage.
page_fixed - UI components will be in a grid format that has a fixed width that will vary depending on the settings of the device.

Image from the Posit tutorials (https://shiny.posit.co/r/articles/build/layout-guide/)

Fillable page (used thus far)

ui <- page_fillable( #<<
  layout_columns(
    card(card_header("Table of DE results", dataTableOutput(outputId = "de_data"))),
    
    card(card_header("MA plot",plotOutput("ma_plot"))),
    
    card(card_header("Volcano plot",plotOutput("volcano_plot"))),
    
    col_widths = c(12,6,6)
  )
)

Fillable page (used thus far)

#same server function as previous
shinyApp(ui = ui, server = server)

The cards do not fill the screen horizontally and dynamically, but when the window is not big enough, the cards ajust and add scroll bars so you have access to the whole table or plot not matter what.

Fixed page

ui <- page_fixed( #<<
  layout_columns(
    card(card_header("Table of DE results", dataTableOutput(outputId = "de_data"))),
    
    card(card_header("MA plot",plotOutput("ma_plot"))),
    
    card(card_header("Volcano plot",plotOutput("volcano_plot"))),
    
    col_widths = c(12,6,6)
  )
)

Fixed page

#same server function as previous
shinyApp(ui = ui, server = server)

The cards do not fill the screen horizontally as there is padding on each side and the cards are a fixed height. When the window is not big enough, you need to scroll down to see the plots on the bottom of the page.

Fluid page

ui_fluid <- page_fluid( #<<
  layout_columns(
    card(card_header("Table of DE results", dataTableOutput(outputId = "de_data"))),
    
    card(card_header("MA plot",plotOutput("ma_plot"))),
    
    card(card_header("Volcano plot",plotOutput("volcano_plot"))),
    
    col_widths = c(12,6,6)
  )
)

Fluid page

#same server function as previous
shinyApp(ui = ui, server = server)

The cards fill the screen horizontally and dynamically, but are a fixed height. When the window is not big enough, you need to scroll down to see the plots on the bottom of the page.

Value boxes and sidebars

Value boxes

Value boxes are another common UI element from the bslib package and are nice ways to show key numbers or information that you want to highlight for the user.

the ‘value’ argument in a value box will be the most prominent text
the ‘title’ argument goes above the value and other unnamed arguments go below.
the color can be set by the ‘theme’ argument, which can be made with value_box_theme or use special bootstrap themes (will see this later)
the ‘showcase’ argument can simply be an icon (see ?icon page) or can get more complex and show a plot

ui <- page_fluid(
    layout_columns(
      layout_columns(
        value_box(title = "Number of genes that go up:", value = 2000, "Adjusted p-value < 0.05", showcase = icon("arrow-up"), theme = value_box_theme(bg = "#22b430")), #<<
      value_box(title = "Number of genes that go down:", value = 1000, "Adjusted p-value < 0.05", showcase = icon("arrow-down"), theme = value_box_theme(bg ="#c34020" )), #<<
        col_widths = c(12,12)
      ),
      card(card_header("Table of DE results", dataTableOutput(outputId = "de_data"))), 
      col_widths = c(3,9))
)

Value boxes

Here we just hard code in numbers to show in the value boxes, but this will obviously be more useful if this number can repsond to user activity. This is something we will do later on.

#same server function as previous
shinyApp(ui = ui, server = server)

Add a sidebar to a card

Sidebars are retractable areas that can be useful in adding information or eventually add user inputs for a specific part of the app. Here we add a sidebar only to the card that contains the table.

The layout_sidebar function is used to set this up within the card. By default, layout_* elements will be fillable, here its demonstrated that this can be set to FALSE if desired.

ui <-page_fluid( 
  layout_columns(
    card(card_header("Table of DE results"),
         layout_sidebar(sidebar = sidebar("Sidebar ONLY for table", width = 400), #<<
                        dataTableOutput(outputId = "de_data"), #<<
                        fillable = FALSE)), #<<
    card(card_header("MA plot",plotOutput("ma_plot"))),
    card(card_header("Volcano plot",plotOutput("volcano_plot"))),
    col_widths = c(12,6,6)
  )
)

Add a sidebar to the page

Sidebars can also be added to the whole page of the app by using the page_sidebar function in a similar manner to the other page_* functions used thus far.

Page sidebars will remain static as you scroll up and down the page. They are often nice for user inputs or information that you always want the user to see.

ui <- page_sidebar(
  title = "RNAseq tools",
  
  sidebar = sidebar( #<<
    "This is a sidebar for the whole page", #<<
    width = 300, #<<
  ), #<<
  
  layout_columns(
    card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")),
    card(card_header("MA plot"),plotOutput("ma_plot")),
    card(card_header("Volcano plot"),plotOutput("volcano_plot")),
    col_widths = c(12,6,6), row_heights = c("750px", "500px")
  )
)

Mutli-page apps

Use a navbar layout for multi-page app

Oftentimes we want a multi-page layout where the user can click through tabs to see pages with different types of data or information. This can be done using the page_navbar function coupled with child nav_panel functions that contain the UI elements for each page.

ui <- page_navbar( #<<
  title = "RNAseq tools",
  nav_panel(title = "DE Analysis",  #<<
            layout_columns(
              card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")),
              card(card_header("MA plot"),plotOutput("ma_plot")),
              card(card_header("Volcano plot"),plotOutput("volcano_plot")),
              col_widths = c(12,6,6), row_heights = c("750px", "500px")
            )),
  nav_panel(title = "Next steps",  "The next step in our analysis will be...") #<<
)

Navbar menu

We can easily add a menu on the right hand side of our navbar as well with key links or information. The nav_spacer function will push the menu to the right hand side of the page, and the nav_menu function can contain multiple nav_item objects to comprise the list.

ui <- page_navbar(
  title = "RNAseq tools",
  nav_panel(title = "DE Analysis",  
            layout_columns(
              card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")),
              card(card_header("MA plot"),plotOutput("ma_plot")),
              card(card_header("Volcano plot"),plotOutput("volcano_plot")),
              col_widths = c(12,6,6), row_heights = c("750px", "500px")
            )),
  nav_panel(title = "Next steps",   "The next step in our analysis will be..."),
  nav_spacer(), #<<
  nav_menu( #<<
    title = "Links", align = "right", #<<
    nav_item( #<<
      tags$a(shiny::icon("chart-simple"), "RU BRC - Learn more!",href = "https://rockefelleruniversity.github.io/", target = "_blank")), #<<
    nav_item( #<<
      tags$a(shiny::icon("arrow-right"), "More about posit",href = "https://posit.co/", target = "_blank"))#<<
  ) #<<
)

Add sidebars to a multi-page app

Sidebars are easily integrated into the page_navbar set up. The ‘sdiebar’ argument of the page_navbar function will add the same sidebar to every page of the app.

ui <- page_navbar( 
  title = "RNAseq tools",
  sidebar = sidebar("The same sidebar on every page...", width = 500), #<<
  nav_panel(title = "DE Analysis",  
            layout_columns(
              card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")),
              card(card_header("MA plot"),plotOutput("ma_plot")),
              card(card_header("Volcano plot"),plotOutput("volcano_plot")),
              col_widths = c(12,6,6), row_heights = c("750px", "500px")
            )),
  nav_panel(title = "Next steps",  "The next step in our analysis will be...") 
)

Add sidebars to a multi-page app

#same server function as previous
shinyApp(ui = ui, server = server)

Add sidebars to select tabs

Sidebars can also be added to some pages and not others by using the layout_sidebar function. For example, a layout_sidebar object within a nav_panel function will only put that sidebar on that panel/page.

ui <- page_navbar( 
  title = "RNAseq tools",
  nav_panel(title = "DE Analysis",  
            layout_sidebar(#<<
              sidebar = sidebar("The side bar is only on this page...", width = 500),  #<<
              layout_columns(#<<
                card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")), #<<
                card(card_header("MA plot"),plotOutput("ma_plot")), #<<
                card(card_header("Volcano plot"),plotOutput("volcano_plot")), #<<
                col_widths = c(12,6,6), row_heights = c("750px", "500px")) #<<
            ),  #<<
  ),
  nav_panel(title = "Next steps",  "The next step in our analysis will be...") 
)

Add sidebars to select tabs

#same server function as previous
shinyApp(ui = ui, server = server)

Themes

It’s easy to modify the look of the app using the bslib package. The page_sidebar function (and other payout functions) has a ‘theme’ argument that takes a bs_theme object.

bslib has builtin themes that can be easily used. The themes can be previewed (here)[https://bootswatch.com/], and the string to use in the ‘bootswatch argument’ of the bs_theme function can be picked from the vector returned by bootswatch_themes()

bootswatch_themes()

##  [1] "cerulean"  "cosmo"     "cyborg"    "darkly"    "flatly"    "journal"  
##  [7] "litera"    "lumen"     "lux"       "materia"   "minty"     "morph"    
## [13] "pulse"     "quartz"    "sandstone" "simplex"   "sketchy"   "slate"    
## [19] "solar"     "spacelab"  "superhero" "united"    "vapor"     "yeti"     
## [25] "zephyr"

Themes - Cerulean

ui <- page_navbar(
  title = "RNAseq tools",
  theme = bs_theme(version = 5, bootswatch = "cerulean"), #<<
  nav_panel(
    title = "DE Analysis",
    layout_sidebar(
      sidebar = sidebar("This is a sidebar", width = 300),
      
      layout_columns(
        card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")),
        card(card_header("MA plot"),plotOutput("ma_plot")),
        card(card_header("Volcano plot"),plotOutput("volcano_plot")),
        col_widths = c(12,6,6), row_heights = c("750px", "500px")
      )
    )
  ),
  nav_panel(title = "Next steps","The next step in our analysis will be..."),
  nav_spacer(),
  nav_menu(title = "Links",
           align = "right",
           nav_item(tags$a(shiny::icon("chart-simple"), "RU BRC - Learn more!", href = "https://rockefelleruniversity.github.io/",target = "_blank"))
  )
)

Themes - Cerulean

#same server function as previous
shinyApp(ui = ui, server = server)

Themes - Darkly

ui_darkly <- page_navbar(
  title = "RNAseq tools",
  theme = bs_theme(version = 5, bootswatch = "darkly"), #<<
 nav_panel(
    title = "DE Analysis",
    layout_sidebar(
      sidebar = sidebar("This is a sidebar", width = 300),
      
      layout_columns(
        card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")),
        card(card_header("MA plot"),plotOutput("ma_plot")),
        card(card_header("Volcano plot"),plotOutput("volcano_plot")),
        col_widths = c(12,6,6), row_heights = c("750px", "500px")
      )
    )
  ),
  nav_panel(title = "Next steps","The next step in our analysis will be..."),
  nav_spacer(),
  nav_menu(title = "Links",
           align = "right",
           nav_item(tags$a(shiny::icon("chart-simple"), "RU BRC - Learn more!", href = "https://rockefelleruniversity.github.io/",target = "_blank"))
  )
)

Themes - Darkly

#same server function as previous
shinyApp(ui = ui, server = server)

Custom themes

A big benefit of the bs_theme function is the ability to highly customize the app theme. This can be done with the arguments to the function, or with additional CSS. We use custom CSS to modify the header of the cards throughout the app and manually set the main color options.

custom_css <- "
  .card-header {
    background-color: #d3dff1;
    border-bottom: 2px solid #273449;
  }
"

# Create theme with custom CSS
custom_theme <- bs_theme(
  version = 5,
  bg = "white",
  fg = "#273449",
  primary = "#5886b2",
  secondary = "#95a5a6",
  success = "#18bc9c",
  info = "#3498db",
  warning = "#f39c12",
  danger = "#e74c3c",
  preset = "bootstrap",
  "navbar-bg" = "#5886b2"
) |> bs_add_rules(custom_css)

Custom themes

This custom theme object can then be used in the ‘theme’ argument of page_sidebar.

ui <- page_navbar(
  title = "RNAseq tools",
  theme = custom_theme, #<<
  nav_panel(
    title = "DE Analysis",
    layout_sidebar(
      sidebar = sidebar("This is a sidebar", width = 300),
      
      layout_columns(
        card(card_header("Table of DE results"), dataTableOutput(outputId = "de_data")),
        card(card_header("MA plot"),plotOutput("ma_plot")),
        card(card_header("Volcano plot"),plotOutput("volcano_plot")),
        col_widths = c(12,6,6), row_heights = c("750px", "500px")
      )
    )
  ),
  nav_panel(title = "Next steps","The next step in our analysis will be..."),
  nav_spacer(),
  nav_menu(title = "Links",
           align = "right",
           nav_item(tags$a(shiny::icon("chart-simple"), "RU BRC - Learn more!", href = "https://rockefelleruniversity.github.io/",target = "_blank"))
  )
)

Themes

#same server function as previous
shinyApp(ui = ui, server = server)

Time for an exercise!

Exercises for Session 1 are here

Answers to exercise

Answers can be found here

R code for solutions can be found here

Introduction to Shiny, Session 1

Bioinformatics Resource Center - Rockefeller University

http://rockefelleruniversity.github.io/RU_course_template/

brc@rockefeller.edu

Set Up

Materials

Course materials

Set the Working directory

Course outline

What is Shiny? Why do we use it?

Basic components of Shiny app

Shiny - how to get started

Shiny - how to get started

Shiny - how to get started

Shiny - how to get started

Shiny - how to get started

Shiny - how to get started

Shiny basics

Shiny basics - packages and global code

Shiny basics - UI object

Shiny basics - rendering outputs

Shiny basics - HTML helper functions

Shiny basics - server function

Shiny basics - launch app

Shiny resources for inputs and outputs

Shiny app folder structure

Building our own app from scratch

Adding global variables to app

App with datatable from DT package

App with datatable from DT package

Customize datatable

Customize datatable

Other options for displaying tables

Add plots to app

Add plots to app

Add plots to app

App layouts

Tidy up app appearance with cards

Tidy up app appearance with cards

Collapsable cards with accordions

Collapsable boxes with accordions

Multiple rows

Multiple rows

Nested rows within a column

Nested rows within a column

Page layout options

Fillable page (used thus far)

Fillable page (used thus far)

Fixed page

Fixed page

Fluid page

Fluid page

Value boxes and sidebars

Value boxes

Value boxes

Add a sidebar to a card

Add a sidebar to a card

Add a sidebar to the page

Add a sidebar to the page

Mutli-page apps

Use a navbar layout for multi-page app

Use a navbar layout for multi-page app

Navbar menu

Use a navbar layout for multi-page app

Add sidebars to a multi-page app

Add sidebars to a multi-page app

Add sidebars to select tabs

Add sidebars to select tabs

Themes

Themes

Themes - Cerulean

Themes - Cerulean

Themes - Darkly

Themes - Darkly

Custom themes

Custom themes

Themes

Time for an exercise!

Answers to exercise